/*
 * @Author: aleimu
 * @Date: 2021-03-08 09:36:50
 * @Description: file content
 */

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom';

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    // 继承这个react的基类，才能有render()
    render() {
        return (

            <Router>
                <Link to="/about/page1">page1</Link>
                <Link to="/about/page2">page1</Link>
                <NavLink className="menu-link" activeClassName="active" exact activeStyle={{ color: '#fff' }} to='/home'>首页</NavLink>
                <NavLink activeClassName={'active'} activeClassName="active" to="/about">跳转到about</NavLink>
                <Switch>
                    {/* <Redirect from="/" to="/home" exact></Redirect> */}
                    <Route path="/home" exact component={() => <div>HOME</div>} />
                    <Route path="/about" component={() => <div>{this.props.children}</div>}>
                        <Switch>
                            <Redirect from="/about" to="/about/page1" exact></Redirect>

                            <Route path="/about/page1" exact component={() => <div>about-page-1</div>} />
                            <Route path="/about/page2" exact component={() => <div>about-page-2</div>} />
                        </Switch>
                    </Route>
                </Switch>
            </Router>
        )
    }
}

// 路由配置说明（你不用加载整个配置，
// 只需加载一个你想要的根路由，
// 也可以延迟加载这个配置）。
export default App